<template>
  <div class="data-tree-title">
    <ul class="tree-node" @click="clickChangeDisplay($event)">
      <a @click="clickChangeDisplay($event)" v-if="undefined!==dataJson && '0'===dataJson.isLeaf">{{extendFlag}}</a>
      <span @click="clickChangeDisplay($event)" class="node-text-span" v-if="undefined!==dataJson">&nbsp;&nbsp;{{dataJson.name}}&nbsp;&nbsp;—————————————————————————&nbsp;&nbsp;{{dataJson.num}}</span>
      <div v-if="undefined!==dataJson">
        <DataTree :style="{display:displayStyle}" v-for="(item,index) in dataJson.sonList" :key="index" :name="item" :data-json="item"/>
      </div>
    </ul>
  </div>
</template>

<script>
export default {
  name: "DataTree",
  data(){
    return{
      displayStyle:'block',
      extendFlag:'-'
    }
  },
  props:{
    dataJson:{}
  },
  methods:{
    setTreeData(data){
      this.dataJson = data;
    },
    clickChangeDisplay(event){
      let event1 = event.currentTarget;
      let event2 = event.target;
      // 避免单击子节点触发父节点事件
      if(event1===event2){
        if('block'===this.displayStyle){
          this.displayStyle = 'none';
          this.extendFlag='+';
        }else{
          this.displayStyle = 'block';
          this.extendFlag='-';
        }
      }
    }
  },
}
</script>

<style scoped>
.data-tree-title{
  width: 100%;
}
.tree-node{
  margin-inline-start: 20px;
  padding-inline-start: 0;
  padding-top: 7px;
  margin-top: 3px;
  font-size: small;
  border-left: 1px #cfcfcf solid;
}
.node-text-span{
  padding-left: 4px;
  margin-bottom: 7px;
}
</style>